import React from 'react'
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd'
import { useSelector } from 'react-redux'
import CommonAside from '../components/commonAside'
import CommonHeader from '../components/commonHeader'
import CommonTag from '../components/commonTag'
import { RouterAuth } from '../router/routerAuth'

const { Content } = Layout;

const Main = () => {
  // 获取展开收起的状态
  const collapsed = useSelector(state => state.tab.isCollapse)

  return (
    <RouterAuth>
      <Layout className="main-container">
        <CommonAside collapsed={collapsed} />
        <Layout>
          <CommonHeader/>
          <CommonTag />
          {/* 展示区 */}
          <Content
            style={{
              margin: '5px',
              padding: '5px',
              minHeight: 280,
              background: '#f5f5f5',
              borderRadius: 5,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </RouterAuth>
  );
}

export default Main